import React, { useState, FC } from 'react';
import { Table, Button, Space, Popconfirm } from 'antd';
import { connect, Dispatch, Loading, UserState } from 'umi';
import UserModal from './components/UserModal';
import { SingleUserType, FormValues } from './data';

interface UserPageProps {
  users: UserState;
  dispatch: Dispatch;
  userListLoading: boolean;
}

const UserPageList: FC<UserPageProps> = ({
  users,
  dispatch,
  userListLoading,
}) => {
  const [modalVisible, setIsModalVisible] = useState(false);
  const [record, setRecord] = useState<FormValues | undefined>(undefined);

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: (text: string) => <a>{text}</a>,
    },
    {
      title: 'Create Time',
      dataIndex: 'create_time',
      key: 'create_time',
    },
    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: 'Action',
      key: 'action',
      render: (text: string, record: SingleUserType) => (
        <Space size="middle">
          <a
            onClick={() => {
              editHandler(record);
            }}
          >
            Edit
          </a>
          &nbsp;&nbsp;&nbsp;
          <Popconfirm
            title="Are you sure delete this user?"
            onConfirm={() => {
              deleteHandler(record.id);
            }}
            okText="Yes"
            cancelText="No"
          >
            <a>Delete</a>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const editHandler = (record: SingleUserType) => {
    setIsModalVisible(true);
    setRecord(record);
  };

  const onFinish = (values: FormValues) => {
    let id = 0;

    if (record) {
      id = record.id;
    }

    if (id) {
      dispatch({
        type: 'users/edit',
        payload: { values, id },
      });
    } else {
      dispatch({
        type: 'users/add',
        payload: { values },
      });
    }

    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };

  const deleteHandler = (id: number) => {
    dispatch({
      type: 'users/delete',
      payload: {
        id,
      },
    });
  };

  const addHandler = () => {
    setIsModalVisible(true);
    setRecord(undefined);
  };

  return (
    <div className="list-table">
      <Button type="primary" onClick={addHandler}>
        Add
      </Button>
      <Table
        columns={columns}
        dataSource={users.data}
        rowKey="id"
        loading={userListLoading}
      />
      <UserModal
        visible={modalVisible}
        onFinish={onFinish}
        handleCancel={handleCancel}
        record={record}
      ></UserModal>
    </div>
  );
};

// 第一种写法
// const mapStateToProps = ({ users }) => {
//   return {
//     users,
//   };
// };
// export default connect(mapStateToProps)(index);

// 第二种写法
export default connect(
  ({ users, loading }: { users: UserState; loading: Loading }) => ({
    users,
    userListLoading: loading.models.users,
  }),
)(UserPageList);
